<template>
  <div class="icon">
    <i class="iconfont" :class="[iconClass, sizeClass]"></i>
  </div>
</template>

<script>
export default {
  name: "Icon",
  props: {
    name: {
      type: String,
      default: ""
    },
    size: {
      type: String,
      default: "default",
      validator: value => ["small", "default", "big"].includes(value)
    }
  },
  computed: {
    iconClass() {
      return `icon-${this.name}`;
    },
    sizeClass() {
      return `icon-size--${this.size}`;
    }
  }
};
</script>

<style lang="less" scoped>
@import "//at.alicdn.com/t/font_1478336_tn7mr9p4b6.css";

.icon {
  display: inline-block;
  font-size: 16px;

  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;

    &.icon-size--small {
      font-size: 12/16em;
    }

    &.icon-size--default {
      font-size: 1em;
    }

    &.icon-size--small {
      font-size: 20/16em;
    }
  }
}
</style>
